<template>
  <view>
    <view class="mod-box" :class="{ 'big-mode-box': vuex_is_zhangbei == 1 }">
      <view class="grid-list flex">
        <view
          class="grid-item"
          v-for="(item, index) in list"
          :key="index"
          @click="customNavClick(item, index)">
          <view class="img-box">
            <image class="img" :src="item.thumb" mode=""></image>
          </view>
          <view class="grid-title">
            {{ item.title }}
          </view>
        </view>
        <!-- <view class="grid-item"  @click="this.toRoute('product-list')">
					<view class="img-box">
						<image class="img" src="/static/index/cat-ico.png" mode=""></image>
					</view>
					<view class="grid-title">
						更多产品
					</view>
				</view> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  methods: {
    customNavClick(item) {
      this.$log("customNavClick 参数", item);
      if (item.url) {
        this.handleUrlJump(item.url);
      } else if (item.id) {
        /* this.toRoute({
						path: '/category',
						query: {
							id: item.id
						}
					}) */
        this.toRoute({
          path: "/product-list",
          query: {
            channelId: item.id,
            title: item.title,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
.mod-box {
  margin-bottom: 24upx;
  .grid-list {
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    background: #ffffff;
    flex-wrap: wrap;
    padding: 40rpx 0 0;
    .grid-item {
      width: 20%;
      // flex: 1;
      text-align: center;
      margin-bottom: 36upx;

      &:nth-child(-n + 5) {
        margin-top: 0;
      }

      .img-box {
        width: 80rpx;
        height: 80rpx;
        margin: 0 auto;

        .img {
          width: 80rpx;
          height: 80rpx;
        }
      }

      .grid-title {
        margin-top: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
      }
    }
  }
}
.big-mode-box {
  .grid-title {
    font-size: 28rpx !important;
  }
}
</style>
